<template>
  <div class="covidNav">
    <p class="title">
      <i></i>
      疫情导航条
    </p>
    <div class="list">
      <div class="nav">
        <router-link to="/Area">
          <img src="../../../assets/images/area.svg" alt="" />
          <div>风险地区</div>
        </router-link>
      </div>
      <div class="nav">
        <router-link to="/test">
          <img src="../../../assets/images/test.svg" alt="" />
          <div>核酸检测</div>
        </router-link>
      </div>
      <div class="nav">
        <router-link to="/prevention">
          <img src="../../../assets/images/prevention.svg" alt="" />
          <div>防疫物资</div>
        </router-link>
      </div>
      <div class="nav">
        <router-link to="/travel">
          <img src="../../../assets/images/travel.svg" alt="" />
          <div>出行政策</div>
        </router-link>
      </div>
      <!-- 第二列 -->
      <!-- <div class="nav">
        <router-link to="/Area">
          <img src="../../../assets/images/area.svg" alt="" />
          <div>同乘查询</div>
        </router-link>
      </div>
      <div class="nav">
        <router-link to="/test">
          <img src="../../../assets/images/test.svg" alt="" />
          <div>健康知识</div>
        </router-link>
      </div>
      <div class="nav">
        <router-link to="/prevention">
          <img src="../../../assets/images/prevention.svg" alt="" />
          <div>密接自查</div>
        </router-link>
      </div>
      <div class="nav">
        <router-link to="/travel">
          <img src="../../../assets/images/travel.svg" alt="" />
          <div>在线问医</div>
        </router-link>
      </div> -->
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "CovidNav",
  components: {},
  // 定义属性
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.covidNav {
  padding: 0.2rem;
}
.title {
  padding-bottom: 0.2rem;
  font-size: 0.35rem;
  font-weight: bold;
  line-height: 0.5rem;
  i {
    display: inline-block;
    width: 0.08rem;
    height: 0.4rem;
    margin-right: 0.06rem;
    margin-bottom: 0.03rem;
    vertical-align: middle;
    background: #4169e2;
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 0.2rem;
  font-size: 0.3rem;
  .nav {
    width: 25%;
    text-align: center;
    color: #666;
    margin-top: 0.2rem;
    img {
      width: 0.6rem;
      height: 0.6rem;
      margin-bottom: 0.15rem;
    }
  }
}
</style>
